<template>
  <el-dialog
    v-model="dialogVisible"
    title="检测报告"
    width="600px"
    :before-close="handleClose"
  >
    <div class="report-tabs">
      <div class="tab-row">
        <el-button 
          :type="activeTab === 'params-simple' ? 'primary' : 'default'" 
          @click="activeTab = 'params-simple'"
          class="tab-btn"
        >
          体质参数表 报告（精简）
        </el-button>
        <el-button 
          :type="activeTab === 'params-full' ? 'primary' : 'default'" 
          @click="activeTab = 'params-full'"
          class="tab-btn"
        >
          体质参数表 报告（完整）
        </el-button>
      </div>
      <div class="tab-row">
        <el-button 
          :type="activeTab === 'today-simple' ? 'primary' : 'default'" 
          @click="activeTab = 'today-simple'"
          class="tab-btn"
        >
          今日数据（精简）
        </el-button>
        <el-button 
          :type="activeTab === 'today-full' ? 'primary' : 'default'" 
          @click="activeTab = 'today-full'"
          class="tab-btn"
        >
          今日数据（完整）
        </el-button>
      </div>
    </div>

    <div class="report-content" ref="reportRef">
      <div class="placeholder-text">
        当前选择：{{ getTabName(activeTab) }}
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, computed } from 'vue'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  }
})

// Emits
const emit = defineEmits(['update:visible', 'close'])

// Data
const dialogVisible = ref(props.visible)
const reportRef = ref(null)
const activeTab = ref('params-simple')

// Watch
watch(() => props.visible, (val) => {
  dialogVisible.value = val
})

watch(dialogVisible, (val) => {
  emit('update:visible', val)
})

// Methods
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}

const getTabName = (tab) => {
  const tabNames = {
    'params-simple': '体质参数表 报告（精简）',
    'params-full': '体质参数表 报告（完整）',
    'today-simple': '今日数据（精简）',
    'today-full': '今日数据（完整）'
  }
  return tabNames[tab] || ''
}
</script>

<style lang="scss" scoped>
.report-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  padding: 0 20px;

  .tab-row {
    display: flex;
    gap: 12px;
    justify-content: center;

    .tab-btn {
      flex: 1;
      min-width: 180px;
      max-width: 240px;
      height: 44px;
      font-size: 14px;
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
      }
    }
  }
}

.report-content {
  min-height: 200px;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  .placeholder-text {
    font-size: 16px;
    color: #909399;
    text-align: center;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
}

// 打印样式
@media print {
  .dialog-header .header-actions,
  .dialog-footer {
    display: none !important;
  }
}
</style>

